Если понять несколько основных правил, создание HTML-документа
не покажется вам трудным. Этим правилам необходимо следовать для того,
чтобы любой браузер, установленный практически на любой платформе, мог
правильно демонстрировать ваш документ. Вы, как автор НТМL-документа, несете
за это единоличную ответственность.
Границы документа.
Самым главным из тэгов HTML является одноименный
тэг - <HTML>. Он должен всегда открывать ваш документ, так же, как тэг
</HTML> должен непременно стоять в последней его строке. Эти тэги обозначают,
что находящиеся между ними строки представляют единый HTML-документ (листинг
1.1.). Это важно, так как сам по себе документ является обыкновенным текстовым
файлом в формате ASCII. Без этих тэгов браузер или другая программа просмотра
не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Листинг 1.1. Простейший HTML-документ.
Примечание:
Хотя большинство современных браузеров могут
опознать документ и не содержащий тэгов <HTML> и </HTML>, все же
их употребление крайне желательно. Новые области применения HTML, например,
электронная почта, не предполагают обязательное использование браузеров;
другие программы с большой долей вероятности примут HTML-документ без открывающего
и закрывающего тэгов за обычный текстовый.
Закрывающий тэг столь же важен, что и открывающий.
Если документ включен в электронное письмо, тэг </HTML> даёт команду
программе просмотра прекратить интерпретацию текста как HTML-кода.
Заголовок документа.
Заголовок документа не является обязательным элементом,
однако хорошо составленный заголовок документа может быть весьма полезен.
Задачей заголовка документа является представление необходимой информации
для программы, интерпретирующей документ. Элементы, находящиеся внутри
раздела HEAD (кроме названия документа, записываемого с помощью раздела
TITLE), не видны на экране (во всяком случае, напрямую).
Элементы, содержащиеся внутри раздела HEAD документа, нужны для того,
чтобы:
Раздел НЕAD открывается тэгом <НЕAD>. Обычно этот тэг следует сразу же за тэгом <HTML>. Закрывающий тэг </HEAD> показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа.
Название документа.
Раздел TITLE является единственным обязательным
элементом заголовка документа и служит для того, чтобы дать документу название.
Оно обычно показывается в заголовке окна 6payaepa. Содержимое раздела ТIТLЕ
нельзя путать с названием файла документа; напротив, оно представляет собой
текстовую строку, совершенно не зависящую от имени и местоположения файла,
что делает его весьма полезным. Имя же файла жестко определяется операционной
системой того компьютера, на котором он хранится.
Название документа записывается между тэгами <TITLE>
и </TITLE> и представляет собой текстовую строку. Не следует заключать
его в кавычки, если вы хотите, чтобы на экране название их также не имело.
В большинстве случаев раздел TITLE занимает не более одной строки.
В принципе, название может иметь любую длину и содержать
любые символы, кроме некоторых зарезервированных. На практике лучше ограничиться
одной строкой, имея в виду, что название появляется в заголовке окна браузера.
Также следует помнить о том, что останется от названия документа при сворачивании
окна браузера. Поэтому старайтесь поместить наиболее важные слова в начало
названия.
Примечание:
По умолчанию текст, содержащийся в названии документа,
используется при создании закладки (bookmark) для документа, Поэтому для
большей информативности избегайте безликих названий (Home Page, Index и
т. п.). Подобные слова, используемые в качестве названия закладки, обычно
совершенно бесполезны.
Листинг 1.3 показывает пример элемента TITLE. На
рис. 1.1 показано, как браузер Internet Explorer использует его в заголовке
окна.
Листинг 1.3 Пример элемента TITLE.
Рис. 1.1. Элемент TITLE нужен для того, чтобы документ легко идентифицировался.
Индексный поиск в документе.
Тэг <ISINDEX> является не столь часто употребляемым
элементом раздела заголовка документа HEAD. Он обычно располагается перед
тэгом <FORM> и используется для сообщения браузеру о том, что сервером
поддерживается индексный поиск. В ответ на это браузер создает поле для
ввода текста, по которому будет произведен поиск.
Примечание:
Если вы не уверены, что ваш сервер поддерживает
эту функцию или вы не знаете, как ее применять, тэг <ISINDEX> лучше
не использовать вовсе. В противном случае ваши читатели будут весьма разочарованы.
Если на вашем сервере установлены современные средства
поиска, работа с документами большого объема сильно облегчается. Каталоги
и телефонные справочники являются хорошими примерами документов, где весьма
уместно применение встроенного индексирования.
Атрибуты элемента <ISINDEX> приведены в табл.
1.1.
Таблица 1.1.
Атрибут | Назначение |
ACTION | Указывает программу поиска, которой передается введенная строка текста. |
PROMPT | Определяет подсказку, которая выводится вместо подсказки по умолчанию. |
Пример использования тэга <ISINDEX> показан на листинге 1.2. Список, который создается при помощи этого HTML-документа, содержит имена старших офицеров Республиканской армии времен Гражданской войны, отсортированные по старшинству. Так как список состоит из более чем 2 600 имен, было бы очень трудно найти конкретного человека простым просмотром. На рис. 1.2. показано, как браузер создает текстовое поле для ввода строки запроса. Читатель вводит ее, а программа поиска, расположенная на сервере, находит нужные данные.
Предупреждение:
Во время проверки этого листинга автор обнаружил,
что Netscape Navigator 3.0 неверно устанавливает цвета текста и фона документа,
если используется тэг <ISINDEX>. (Netscape Navigator 4.0 этой ошибки
уже не имеет.)
Связь HTML-документов между собой.
Часто НТМL-документы связаны между собой, т. е.
имеют ссылки друг на друга. Ссылки могут быть как абсолютные, так и относительные
(листинг 1.4). И те и другие имеют недостатки. Абсолютные ссылки могут
быть слишком громоздкими и переставать работать, если перемещен младший
(child) по иерархии документ. Относительные ссылки легче вводить и обновлять,
но и эта связь обрывается, если перемещён старший (parent) по иерархии
документ. Оба вида связи могут нарушиться при переносе документа с одного
компьютера на другой.
Листинг 1.4. Абсолютные и относительные ссылки.
Допустим, пользователь получил на свою машину большой
документ и отключился от Сети для его подробного изучения. Все ссылки в
локальной копии документа перестанут работать. Для их "реанимации" придется
вновь обратиться к оригиналу документа, находящемуся на удаленном компьютере.
К счастью, разработчики HTML предусмотрели эту проблему
и добавили два элемента, BASE и LINK, которые включаются в заголовок для
того, чтобы связь между документами не нарушалась.
Примечание:
Если вы знакомитесь с HTML впервые, возможно, вам
следует пропустить этот раздел. Необходимость пользоваться элементами BASE
и LINK возникнет у вас не раньше, чем вы начнете составлять сложные многостраничные
документы.
Элемент BASE.
Этот элемент служит для указания полного базового
URL-адреса документа. С его помощью относительная ссылка продолжает работать,
если документ переносится в другой каталог или даже на другой компьютер.
Элемент BASE работает аналогично команде DOS path, что позволяет программе
просмотра определить ссылку на искомый документ, даже если она находится
в старшем по иерархии документе, расположенном на другом компьютере.
Элемент BASE имеет один обязательный атрибут
HREF, после которого указывается полный URL-адрес документа. На листинге
1.5 показан пример использования тэга <BASE>.
Листинг 1.5. Использование тэга <BASE>.
Обратите внимание, что элемент BASE указывает браузеру, где искать файл. В случае, если пользователь работает с локальной копией файла и его машина не отключена от Сети, изображения пиктограмм "News" и "Mags" будут найдены и показаны в окне браузера.
Элемент LINK.
Даже если элемент BASE позволяет найти файл, остаётся
открытым вопрос о взаимоотношениях документов. Важность этих отношений
возрастает пропорционально росту сложности ваших документов. Для того чтобы
поддерживать логическую связь между ними, в HTML введен элемент LINK.
Элемент LINK указывает на связь документа, содержащего
тэг <LINK> и другого документа или объекта. Он состоит из URL-адреса
и атрибутов, конкретизирующих отношения документов. Заголовок документа
может содержать любое количество элементов LINK. Таблица 1.2. описывает
атрибуты LINK и их функции.
Таблица 1.2.
Атрибут | Назначение |
HREF | Указывает на URL-адрес другого документа. |
REL | Определяет отношение между текущим и другим документом. |
REV | Определяет отношение между другим документом и текущим (функция, обратная REL). |
TYPE | Указывает тип и параметры присоединенной таблицы стилей. |
Между документами может существовать множество различных отношений, поэтому приведенный список атрибутов LINK для версии HTML 3.2 нельзя считать полным. Наиболее часто употребляемым значением является "made", например:
<LINK HREF="mailtо: nul@utexas.edu">
Эта строка дает URL-адрес для связи с автором документа.
При интерпретации этой строки будет открыто окно e-mail с адресом получателя
(nul@utexas.edu). Компания Sandia National Laboratories, занимающаяся исследованиями
в области публикации HTML-документов, рекомендует также использование следующих
значений атрибута REV: "author", "еditor", "publisher" и "owner".
Вот несколько примеров атрибутов группы REL: 'bookmark",
"соруright", "glossary", "help", "home", "index", "tос". Атрибуты REL "next"
и "previous" позволяют переходить к следующему документу или возвращаться
к предыдущему. На листинге 1.6. приведен пример элемента HEAD для документа,
являющегося главой руководства on-line.
Листинг 1.6. Использование тэга<LINK>.
Тэги заголовка, настраиваемые автором документа.
Разработка новых спецификаций языка разметки
гипертекста занимает немалый срок, и за это время компании, производящие
браузеры, успевают выпустить несколько версий своих продуктов. Поэтому
в заголовок добавлен еще один функциональный элемент, позволяющий избежать
неприятностей с выводом документов на экран.
Элемент META позволяет автору документа определять
информацию, не имеющую отношения к HTML. Эта информация используется браузером
для действий, которые не предусмотрены текущей версией HTML спецификации.
Элемент META не потребуется вам для создания первых HTML-документов, но
он вам наверняка понадобится, когда ваши странницы станут более сложными.
На рис. 1.3 приведен пример того, как элемент META
заставляет браузер произвести определенную операцию. Обратите внимание
на следующую строку:
<META HTTP-EQUIV=refresh" CONTENT="60" URL="www.fdline.org/homepage.html">
Браузеры Netscape Navigator и Internet Explorer поймут эту запись как инструкцию ожидать 60 секунд, а затем загрузить новый документ. Такая инструкция часто используется при изменении местоположения документов. Небольшой документ с приведенной строкой может быть оставлен на старом месте расположения документа для автоматической ссылки на его новое место расположения.
Рис. 1.3. Браузер может интерпретировать
команду элемента МЕТА для автоматической
загрузки новой страницы.
Следующая командная строка
<META HTTP-EQUIV=refresh" CONTENT="60">
инструктирует браузер перезагружать страницу каждые 60 секунд. Это может быть полезно, если данные на странице часто обновляются, например, в случае отслеживания котировок акций.
Примечание:
Команды, подобные приведенным выше, характерны для
новой технологии clientpull, применяемой при запросе программой-клиентом,
то есть вашим браузером, документа с сервера. На первых этапах вам вряд
ли понадобится эта технология, разве что при частом обновлении данных или
перезагрузке документа.
Сейчас стало весьма популярным применение элемента META для задания ключевых слов при помощи свойства Keywords Многие поисковые системы используют слова, определенные, как показано на листинге 1.7, для поиска по ключу. Этот способ позволяет включать в индекс документа дополнительные слова, которые могут явно не входить в его содержание.
Листинг 1.7. Использование элемента META.
Разрабатывая документ, который впоследствии будет индексирован какой либо поисковой системой, полезно использовать и свойство Description. Если это свойство не используется, для индексации будет взят первый же встретившийся текст на вашей странице, который может не отражать основного смысла всего документа.
Примечание:
Свойства Keywords и Description несложны в понимании
и хороши для использования в элементе META уже на начальном этапе освоения
HTML. Они придадут вашим документам дополнительные полезные качества.
Элемент META может включать атрибуты, указанные
в табл. 1.3. Так же, как в случае элемента LINK, в текущей спецификации
HTML они еще не получили окончательного оформления.
Таблица 1.3.
Атрибут | Назначение |
HТТР-EQUIV | Определяет свойство для элемента. |
NАМЕ | Обеспечивает дополнительное описание элемента. Если этот атрибут опущен, он считается эквивалентным атрибуту HTTP-EQUIV. |
URL | Определяет адрес документа для свойства. |
СONTENT | Определяет возвращаемое значение для свойства. |
Другие элементы заголовка.
В заголовке могут присутствовать еще два элемента.
Они оба не получили окончательного определения в спецификации HTML 3.2,
но поддерживаются браузерами компаний Netscape и Microsoft.
Тело документа.
Хотя в WWW и наметилась тенденция к увеличению "активного"
содержания, большинству читателей все же будет интересна текстовая часть
ваших страниц. Это особенно касается документов, создаваемых для корпоративных
сетей Intranet и руководств on-line. Поэтому независимо от того, пишете
ли вы новый текст или конвертируете старый, процесс работы над телом документа
отнимет у вас немалое количество времени.
Обязательные элементы.
Прежде чем вы приступите к наполнению вашего документа
содержанием, есть смысл изготовить его "каркас". HTML-документ должен содержать
некоторые обязательные элементы, без которых он будет неправильно интерпретирован.
Для того чтобы не вводить такие элементы каждый раз при создании нового
документа, следует приготовить более или менее универсальный шаблон. Такой
шаблон будет рассмотрен в конце этой главы, пока же воспользуемся элементарным
вариантом, приведенным на листинге 1.8.
Листинг 1.8. Простейший шаблон HTML-документа.
Шаблон открывается тэгом <HTML>, который, как
мы уже знаем, необходим для каждого HTML-документа. Следующим идет тэг
<HEAD>, начинающий заголовок документа. Заголовок содержит элемент TITLE,
вводящий название документа, в нашем случае, "This is an example document".
Заголовок закрывается тэгом </HEAD>. Далее идет тэг <BODY>,после
которого вы помещаете текст (тело) документа. Тэг <BODY> обозначает
конец тела, а тэг </HTML> – конец всего документа.
Все, что помещено внутри тела документа, интерпретируется согласно
строгим правилам, позволяющим программам просмотра правильно выводить страницу
на экран монитора.
Примечание:
Строго говоря, использование тэгов <BODY> и </BODY>
необязательно. HTML позволяет опускать тот или иной тэг, если он очевиден,
из контекста. Однако лучше все же их употреблять, так как их отсутствие
может ввести в заблуждение отдельные браузеры и другие программы, работающие
с HTML-кодом.
В листинге 1.8. мы ограничили тело документа одной строкой. Вместо нее вы должны ввести ваш текст строго в формате ASCII, если, конечно, не используете специальный HTML-редактор. При этом выбор символов будет ограничен, но зато понятен компьютерам во всем мире. Вводимый текст не должен форматироваться. Обратите внимание на то, что некоторые символы ASCII могут быть помещены в текст только при помощи кодированного ввода (см. раздел "Специальные символы").
Примечание:
Большинство браузеров трактует скрытые служебные
символы (символы табуляции, конца строки и т. д.) как пробелы; несколько
подобных символов, стоящих рядом, воспринимаются как один пробел.
Атрибуты элемента BODY.
Элемент BODY может содержать большое количество
атрибутов. Все они важны, так как определяют общий облик вашего документа.
Они перечислены в табл. 1.4. Ниже мы рассмотрим функцию каждого из атрибутов
подробнее.
Таблица 1.4.
Атрибут | Назначение |
ALINK | Определяет цвет активной ссылки. |
BACKGRQUND | Указывает на URL-адрес изображения, которое используется в качестве фонового. |
BGCOLOR | Определяет цвет фона документа |
BGPRQPERTIES | Если установлено значение FIXED, фоновое изображение не прокручивается. |
LEFTNARGIN | Устанавливает границу левого поля в пикселах. |
LINK | Определяет цвет еще не просмотренной ссылки. |
ТЕХТ | Определяет цвет текста. |
TOPMARGIN | Устанавливает границу верхнего поля в пикселах. |
VLINK | Определяет цвет уже просмотренной ссылки. |
Цветное оформление документа.
Определение цвета составных частей документа – первый
шаг в его создании. Если это не сделано, используются цвета по умолчанию.
Они определяются установками программы просмотра.
Примечание:
Так как вы не можете знать, какие цвета использует
по умолчанию браузер вашего читателя, лучше всего определить все цветовые
атрибуты. Тогда заведомо один и тот же цвет не будет использован, например,
для текста и фона.
Не существует каких-либо правил создания хорошо сбалансированной палитры. Нужно лишь помнить о том, чтобы читатели смогли прочитать текст, не испытывая неудобств. Старайтесь поддерживать высокую контрастность текста и фона и избегайте соседства областей с близкими цветами.
Определение цветов.
В HTML цвета определяются цифрами в шестнадцатеричном
коде. Цветовая система базируется на трех основных цветах – красном, зеленом
и синем – и обозначается RGB. Для каждого цвета задается шестнадцатеричное
значение в пределах от 00 до FF, что соответствует диапазону 0 – 255 в
десятичном исчислении. Затем эти значения объединяются в одно число, перед
которым ставится символ #. Например, число #800080 обозначает фиолетовый
цвет. Для простоты в HTML 3.2 определены 16 стандартных цветов, которые
вместе с их шестнадцатеричными кодами приведены в табл. 1.5.
Таблица 1.5.
Цвет | Код |
Black (черный) | #000000 |
Maroon (темно-бордовый) | #800000 |
Green (зеленый) | #008000 |
Olive (оливковый) | #808000 |
Navy (темно-синий) | #000080 |
Purple (фиолетовый) | #800080 |
Teal (чирок) | #008080 |
Gray (серый) | #808080 |
Silver (серебряный) | #C0C0C0 |
Red (красный) | #FF0000 |
Lime (известь) | #00FF00 |
Yellow (желтый) | #FFFF00 |
Blue (синий) | #0000FF |
Fuchsia (фуксия) | #FF00FF |
Aqua (аква) | #00FFFF |
White (белый) | #FFFFFF |
Определение цветовых атрибутов элемента BODY.
Атрибут BGCOLOR отвечает за цвет фона документа.
Если ваша страница имеет фоновое изображение, этот атрибут должен обеспечивать
цвет, как можно более близкий к общему тону рисунка. Это позволит читателю,
настроившему свой браузер на отказ от загрузки изображений, ясно видеть
текст. Многие авторы не придерживаются этого правила. В этом случае, если
фоновый рисунок исполнен в темных тонах и выбран белый цвет шрифта для
текста, некоторые читатели могут быть удивлены, не увидев ничего, кроме
пустой белой страницы.
Атрибут TEXT определяет цвет текста документа. Старайтесь
в ваших страницах всегда поддерживать высокую контрастность текста. При
использовании шрифта с тонким начертанием помните, что он смотрится лучше
темным на светлом фоне.
Атрибут LINK используется браузером для показа ещё
непросмотренных ссылок. Очевидно, что они должны выделяться цветом на фоне
основного текста.
Атрибут VLINK служит для показа уже просмотренных
ссылок. Как правило, их окрашивают более темным оттенком того же цвета,
что и непросмотренные ссылки.
Атрибут ALINK определяет цвет ссылки, активной в
текущий момент. Это сравнительно новый атрибут, обычно применяющийся для
просмотра многокадровых документов.
Познакомившись с возможностями раскрашивания HTML-страницы,
вы можете спросить: а стоит ли игра свеч? Конечно, если вы пишете статичный
документ (например, руководство), будет лучше, если цвета выберет сам читатель.
Однако, если вы создаёте насыщенную страницу с большим количеством графики,
не пожалейте времени на выбор гармоничной палитры.
Фоновые изображения.
Одним из популярных способов украсить HTML-страницу
является размещение на ней фоновой графики, видимой под основным текстом.
Такой приём помогает подчеркнуть целостность документа либо, наоборот,
разделить его на логические части.
Большинство фоновых изображений малы по размеру,
но их копии, как обои, заполняют все окно программы просмотра. Особенно
популярны различные текстурные (узорчатые) изображения: кирпичи, мрамор,
всевозможные виды тканей. В основном они служат для простого заполнения
пустот в документе. Более продуманные странницы имеют фон, соответствующий
содержанию. На рис. 1.4 показан пример страницы информационного направления,
где фоновое изображение представляет собой комбинацию 0 и 1.
http://www.gdinet.com
Рис 1.4. Использование фонового
рисунка, соответствующего теме документа, является признаком профессионализма
автора.
Другим хорошим приёмом можно считать использование
в качестве фона какой-либо эмблемы или логотипа. В этом случае изображение
должно быть бледным, лучше монохромным, чтобы не мешать восприятию текста.
Часто такой фоновый рисунок делают рельефным. На рис. 1.5 приведен пример
использования рельефного изображения.
http://www.frii.com/~astrosys/index.htm
Рис. 1.5. Логотип компании, присутствующий
в виде монохромного рельефа, ненавязчиво связывает несколько документов
в единое целое.
Фоном документа могут также быть, например, слова
"Проект" или "Конфиденциально", выполненные наподобие водяных знаков на
бумаге.
Среди ваших читателей могут быть и такие, которые
отключают автоматическую загрузку изображений. Помните о совете, данном
выше при обсуждении атрибута BGCOLOR устанавливайте цвет фона близким к
тону фонового рисунка, чтобы текст был хорошо виден при отсутствии фонового
изображения в окне браузера читателя.
Примечание:
Атрибут BGPROPERTIES является уникальным для программы
Microsoft Internet Explorer. Единственное значение, которое он может иметь
– это FIXED. Если BGPROPERTIES = FIXED, фоновое изображение не прокручивается
вместе с текстом.
Установка полей.
Атрибуты LEFTMARGIN и TOPMARGIN служат для установки
расстояния между левым и верхним краями текста и соответствующими краями
окна браузера. Местоположение двух других краев текста не регулируется.
Это сделано для того, чтобы обеспечить возможность просмотра вашей страницы
любым браузером. Вы не можете знать, какой размер окна у программы просмотра
вашего читателя.
Атрибут LEFTMARGIN устанавливает расстояние между
левым краем текста и левым краем окна браузера, которое измеряется в пикселах.
Чаще всего этот атрибут применяется, когда автор хочет иметь слева поле,
свободное от текста и отличающееся узором или цветом от остальной части
фонового изображения. На листинге 1.9 приведен пример установки левого
поля, а на рис. 1.6 показан результат интерпретации этого листинга программой
Internet Explorer.
Атрибут TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера. Он обычно используется, если верхняя часть фонового изображения имеет большое значение, и его желательно оставить открытым.
Листинг 1.9. Пример использования
атрибута LEFTMARGIN.
Включение комментариев.
В HTML-документ можно включать комментарии, которые
не будут видны вашему читателю. Они должны начинаться тэгом <!-- и заканчиваться
тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы
остается невидимым.
Предупреждение:
Вставляя комментарии, помните, что большинство браузеров
имеет возможность просматривать также и код HTML-страницы.
Некоторые старые браузеры интерпретируют каждый символ
как конец комментария, в результате чего оставшаяся часть страницы может
быть искажена. Если вы используете комментарии для отделения элементов
HTML друг от друга на стадии тестирования, лучше всего удалить их из окончательного
варианта.
Сейчас комментарии также применяются для того, чтобы
"спрятать" от браузера скрипты в случае, если он не в состоянии распознать
их.
Элемент ADDRESS.
Элемент ADDRESS является одним из важнейших элементов
HTML. Он служит для идентификации автора документа и (по вашему желанию)
для указания адреса автора. Сюда же обычно помещаются сведения об авторских
правах. Этот элемент располагается либо в начале, либо в самом конце документа.
Элемент ADDRESS состоит из текста, помещенного между
тэгами <ADDRESS и </ADDRESS>. Текст, заключенный между этими тэгами,
обычно показывается в окне браузера курсивом.
На листинге 1.10. можно увидеть пример использования элемента ADDRESS,
а на рис. 1.7 – интерпретацию этого примера программой просмотра.
Листинг 1.10. Использование элемента ADDRESS.
Примечание:
Очень важным дополнением к элементу ADDRESS является
указание дат создания и последнего обновления документа. Это позволяет
читателям определить, знакомились ли они ранее с версией, которую просматривают.
Рис. 1.7. Элемент ADDRESS обычно
используется для идентификации автора и указания даты обновления документа.
Специальные символы.
Некоторые специальные символы не входят в базовую
часть таблицы кодов ASCII. К ним относятся буквы алфавитов части европейских
языков, математические и некоторые другие символы. Однако они тоже могут
быть введены в ваш HTML-документ при помощи символа & (амперсант) и
имени символа, как это показано в листинге 1.11.
Листинг 1.11. Использование специальных символов.
Специальные символы < и введены во второй строке
при помощи кодов < и > соответственно. Иначе все символы, находящиеся
между ними, были бы поняты браузером как тэг HTML.
На рис. 1.8 показано, как браузер Netscape интерпретирует
этот листинг.
Рис. 1.8. В HTML-документ могут
быть введены специальные символы.
Шаблон HTML-документа.
Теперь пришло время заняться созданием базового
шаблона для HTML–документов. Он позволит конвертировать уже готовые текстовые
документы в формат HTML. В следующих главах будет показано, как этот шаблон
можно усовершенствовать.
Начнем с обязательных тэгов <HTML>, <HEAD>,
</HEAD>, <BODY>, </BODY> и </HTML>. Необходимо включить также
элемент TITLE, так как он является обязательным элементом. И, наконец,
между тэгами <BODY> и </BODY> вставим какую-нибудь фразу, указывающую
место ввода текста документа. Результат этих действий можно увидеть на
листинге 1.12.
Листинг 1.12. Подготовка базового шаблона HTML-документа.
Для того чтобы текст смотрелся лучше, добавим простой серый текстурный фон, заменив тэг <BODY> на
<BODY BACKGROUND="greybg.jpg">
Ранее в этой главе говорилось, что если вы добавляете фоновое изображение, то нужно позаботиться, чтобы читатель хорошо различал на нем текст. Для этого, во-первых, дадим атрибуту BGCOLOR значение GRAY, которое ближе всего к фону. Во-вторых, атрибуту TEXT присвоим значение BLACK, а атрибутам LINK, ALINK и VLINK – соответственно BLUE, GREEN и RED. В итоге тэг <BODY приобретет следующий вид:
<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK", LINK="BLUE", ALINK="GREEN", VLINK="RED">
Обязательно нужно не забыть об элементе ADDRESS, поэтому добавим
<ADDRESS>Created by Vitaliy Pavlenko<BR Created on 31 December 1998</ADDRESS>
Конечно, здесь нужно вставить свое имя и дату создания
вашего документа.
Теперь ваш базовый шаблон приобрел окончательный вид, показанный на
листинге 1.13.
Листинг 1.13. Базовый шаблон HTML-документа.
Результат проведенной работы можно увидеть на рис.
1.9.
По мере увеличения объема ваших знаний о языке разметки
гипертекста шаблон HTML-документа будет расти и усложняться. Пока же этот
базовый шаблон пригодится вам для закрепления полученных навыков.